import { defineComponent, watch } from 'vue';
import WrapTitle from '@common/wrapTitle';
import TagCanvas from '@common/TagCanvas.js';

export default defineComponent({
  name: 'InnoWordCloud',
  props: {
    data: Array,
  },
  setup(props: any) {
    watch(
      () => props.data,
      () => {
        setTimeout(() => {
          if (props?.data?.length > 0) {
            TagCanvas.Start('myCanvas', 'tags', {
              interval: 20,
              textColour: ['#33A9E7', '#BAE7FF', '#66F05A'],
              outlineColour: '#fff',
              shape: 'sphere',
              textHeight: 24, // 字体大小
              reverse: true,
              noMouse: true,
              depth: 1,
              dragControl: false,
              maxSpeed: 0.1, // 转动速度
              minSpeed: 0.05,
              initial: [-0.08, 0],
            });
          }
        }, 100);
      }
    );
  },
  render(props) {
    return (
      <>
        <WrapTitle title="创新词云"></WrapTitle>

        {props.data?.length > 0 ? (
          <div id="InnoWordCloud">
            <video src={require('@assets/innoLight.mp4')} autoplay muted loop={true}></video>

            <div class="b_10_3">
              <canvas width="400" height="300" id="myCanvas"></canvas>

              <div id="tags" style="display:none">
                {props.data.map((str: any) => {
                  return (
                    <a href="#" key="index" style={{ color: 'red!important' }}>
                      {str}
                    </a>
                  );
                })}
              </div>
            </div>
          </div>
        ) : (
          <div class="card_null">
            <img src={require('@assets/img_null.png')} width={56} height={74} />
          </div>
        )}
      </>
    );
  },
});
